<template>
  <div class="profile-page">
    <el-container direction="vertical">
      <el-header>
        <h2>用户信息</h2>
      </el-header>
      <el-main>
        <div class="user-info">
          <el-avatar size="large" :src="user.avatar"></el-avatar>
          <h3>{{ user.name }}</h3>
          <p>Email: {{ user.email }}</p>
        </div>
        <div class="user-collections">
          <h3>我的收藏</h3>
          <el-row :gutter="20">
            <el-col :span="8" v-for="restaurant in user.collections" :key="restaurant.id">
              <el-card>
                <img :src="restaurant.image" alt="restaurant image" class="collection-image"/>
                <h4>{{ restaurant.name }}</h4>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'UserProfilePage',
  data() {
    return {
      user: {
        avatar: 'path/to/avatar.jpg',
        name: '用户A',
        email: 'user@example.com',
        collections: [
          { id: 1, name: '餐厅A', image: 'path/to/restaurant1.jpg' },
          { id: 2, name: '餐厅B', image: 'path/to/restaurant2.jpg' }
        ]
      }
    };
  }
};
</script>

<style scoped>
.collection-image {
  width: 100%;
  height: auto;
}
</style>
